<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模态框</title>
		<!-- 引入BootStrap的核心css文件 -->
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
		<!-- 引入Jquery核心js文件，需要在bootstrap的js之前引入 -->
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入BootStrap的核心js文件 -->
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<!-- 
			操作模态框
				通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
				通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框
					打开模态框：$('#identifier').modal('show')
					关闭模态框：$('#identifier').modal('hide')
		 -->
		
		<!-- 通过 data 属性 -->
		<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>
		<!-- 通过 JavaScript -->
		<button class="btn btn-primary" id="btn">打开模态框</button>
		
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
		            </div>
		            <div class="modal-body">
						<form class="form-horizontal" role="form">
							<div class="form-group">
								<label for="uname" class="col-md-2 control-label">姓名</label>
								<div class="col-md-8"> 
									<input type="text" id="uname" class="form-control" placeholder="请输入姓名" />
								</div>
							</div>
							<div class="form-group">
								<label for="upwd" class="col-md-2 control-label">密码</label>
								<div class="col-md-8"> 
									<input type="text" id="upwd" class="form-control" placeholder="请输入密码" />
								</div>
							</div>
						</form>
					</div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		                <button type="button" class="btn btn-primary" id="submit_btn">提交更改</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
		
		<script type="text/javascript">
			// 绑定按钮的点击事件
			$("#btn").click(function(){
				// 手动打开模态框
				$("#myModal").modal("show");
			});
			
			// 关闭模态框
			$("#submit_btn").click(function(){
				// 手动关闭模态框
				$("#myModal").modal("hide");
			});
			
			
		</script>
	</body>
</html>
